<template>
    <div>
        <!--搜索  -->
        <template>
            <el-form :inline="true" :model="projectDoneForm" :rules="projectDoneFormRules" ref="projectDoneFormRules">
                <el-row>
                    <el-col :span="22">
                        <el-form-item label="项目编号">
                            <el-input v-model="projectDoneForm.projectNo"></el-input>
                        </el-form-item>
                        <el-form-item label="项目名称">
                            <el-input v-model="projectDoneForm.name"></el-input>
                        </el-form-item>
                        <el-form-item label="项目进度">
                            <el-select v-model="projectDoneForm.applicationArea" placeholder="请选择">
                                <el-option label="正常进行" value="正常进行"></el-option>
                                <el-option label="发包方方延迟" value="发包方方延迟"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="发布时间">
                            <el-date-picker v-model="projectDoneForm.publishTimeStart" type="date" placeholder="选择日期">
                            </el-date-picker>
                            <el-date-picker v-model="projectDoneForm.publishTimeEnd" type="date" placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2" class="text-right">
                         <el-form-item >
                            <el-button type="primary" @click="fetchProjectDoneList(projectDoneForm)">查询</el-button>
                        </el-form-item>
                    </el-col>
                    <el-col>
                        <el-form-item label="项目属性">
                            <el-select v-model="projectDoneForm.isInternal" placeholder="请选择">
                                <el-option label="内部" value="1"></el-option>
                                <el-option label="外部" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="项目专员">
                            <el-select v-model="projectDoneForm.specialistId" placeholder="请选择">
                                <el-option label="张三" value="张三"></el-option>
                                <el-option label="李四" value="李四"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="">
                             <el-input type="hidden"></el-input>
                             <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                        </el-form-item>
                        <el-form-item label="关闭时间">
                            <el-date-picker v-model="projectDoneForm.contractSignTimeStart" type="date" placeholder="选择日期">
                            </el-date-picker>
                            <el-date-picker v-model="projectDoneForm.contractSignTimeEnd" type="date" placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </template>
        <!--列表  -->
        <template>
            <el-table :data="projectDoneList" border row-class-name="text-center" height="364" class="user-table" style="width:100%">
                <el-table-column show-overflow-tooltip prop="projectNo" label="项目编号">
                </el-table-column>
                <el-table-column show-overflow-tooltip prop="name" label="项目名称">
                    <template scope="scope">
                        <router-link  class="color02 pointer" :to="'/project/whole-detail/' + scope.row.id">
                            {{scope.row.name}}
                        </router-link>
                        <span class="isInternal-icon" v-if="scope.row.isInternal==1">内</span>
                    </template>
                </el-table-column>
                <el-table-column show-overflow-tooltip prop="employerAccountName" label="发包方">
                     <template scope="scope">
                        <span class="color02 pointer" @click='openEmployerDetail(scope.$index, projectDoneList)'>
                            {{scope.row.employerAccountName}}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column show-overflow-tooltip prop="publishTime" label="发布时间">
                </el-table-column>
                <el-table-column show-overflow-tooltip prop="applyCount" label="竞标人数">
                </el-table-column>
                <el-table-column show-overflow-tooltip prop="status" label="项目状态">
                </el-table-column>
                <el-table-column show-overflow-tooltip prop="contractorAccountName" label="中标方">
                     <template scope="scope">
                        <span class="color02 pointer" @click='openContractorDetail(scope.$index, projectDoneList)'>
                            {{scope.row.contractorAccountName}}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column show-overflow-tooltip prop="contractMoney" label="合同金额">
                </el-table-column>
                <el-table-column show-overflow-tooltip prop="actualPayMoney" label="实际支出金额">
                </el-table-column>
                <el-table-column show-overflow-tooltip prop="donecycle" label="完成周期">
                </el-table-column>
                <el-table-column show-overflow-tooltip prop="" label="里程碑">
                    <template scope="scope">
                        <span class="color02 pointer" @click='openMilestoneList(scope.$index, projectDoneList)'>
                             查看
                         </span>
                    </template>
                </el-table-column>
                <el-table-column prop="doneTime" label="关闭时间" width="110">
                </el-table-column>
                <el-table-column show-overflow-tooltip label="操作" width="130">
                    <template scope="scope">
                        <span class="color02 pointer mr-15" @click='openFetchFollowUpLog(scope.$index, projectDoneList)'>
                             跟进
                         </span>
                        <el-dropdown trigger="click">
                            <div class="more-menu">
                            </div>
                            <el-dropdown-menu slot="dropdown">

                                <el-dropdown-item @click.native.prevent='openControlLog(scope.$index, projectDoneList)'>管控记录</el-dropdown-item>
                                <router-link :to="'/project/contract-detail/'+scope.row.id"><el-dropdown-item>合同</el-dropdown-item></router-link>
                                <el-dropdown-item @click.native.prevent='openOperationLog(scope.$index, projectDoneList)'>操作记录</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <template>
            <div class="pagination-wrapper" v-if="projectDonePagination.totalPage>1">
                <div class="fr font-14 mt-10">
                    <span class="page-num mr-25">
                        总数：<span v-text="projectDonePagination.totalCount"></span>
                        每页显示 <span v-text="projectDonePagination.pageSize"></span>
                        条 共 <span v-text="projectDonePagination.totalPage"></span> 页
                    </span>
                    <el-pagination @current-change="changeProjectDonePage" :current-page="projectDonePagination.currentPage" :page-size="projectDonePagination.pageSize"
                        layout="prev, pager, next" :total="projectDonePagination.totalCount" class="fr">
                    </el-pagination>
                </div>
            </div>
        </template>
        <!-- 发包方信息查看 -->
        <template>
            <el-dialog title="发包方信息查看" :visible.sync="employerDetailDialogStatus">
                <div>
                    <el-row>
                        <el-col :span="12">
                            <div>昵称：<span v-text="employerDetailContent.nickname"></span> </div>
                        </el-col>
                        <el-col :span="12">
                            <div>注册时间：<span v-text="employerDetailContent.createdAt"></span></div>
                        </el-col>
                    </el-row>
                   <el-row class="mt-15">
                        <el-col :span="12">
                            <div>真实名称：<span v-text="employerDetailContent.name"></span></div>
                        </el-col>
                        <el-col :span="12">
                            <div>账号状态：<span v-text="employerDetailContent.status"></span></div>
                        </el-col>
                    </el-row>
                   <el-row class="mt-15">
                        <el-col :span="12">
                            <div>联系电话： <span v-text="employerDetailContent.mobile"></span></div>
                        </el-col>
                        <el-col :span="12">
                            <div>认证状态：<span v-text="employerDetailContent.certificationStatus"></span></div>
                        </el-col>
                    </el-row>
                   <el-row class="mt-15">
                        <el-col :span="12">
                            <div>电子邮箱：<span v-text="employerDetailContent.email"></span></div>
                        </el-col>
                        <el-col :span="12">
                            <div>信用等级：<span v-text="employerDetailContent.creditScore"></span></div>
                        </el-col>
                    </el-row>
                </div>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="employerDetailDialogStatus = false">关闭</el-button>
                </div>
            </el-dialog>
        </template>
        <!-- 中标方信息查看 -->
        <template>
            <el-dialog title="中标方信息查看" :visible.sync="contractorDetailDialogStatus">
                <div>
                    <el-row>
                        <el-col :span="12">
                            <div>昵称：<span v-text="contractorDetailContent.nickname"></span> </div>
                        </el-col>
                        <el-col :span="12">
                            <div>注册时间：<span v-text="contractorDetailContent.createdAt"></span></div>
                        </el-col>
                    </el-row>
                    <el-row class="mt-15">
                        <el-col :span="12">
                            <div>真实名称：<span v-text="contractorDetailContent.name"></span></div>
                        </el-col>
                        <el-col :span="12">
                            <div>账号状态：<span v-text="contractorDetailContent.status"></span></div>
                        </el-col>
                    </el-row>
                    <el-row class="mt-15">
                        <el-col :span="12">
                            <div>联系电话： <span v-text="contractorDetailContent.mobile"></span></div>
                        </el-col>
                        <el-col :span="12">
                            <div>认证状态：<span v-text="contractorDetailContent.certificationStatus"></span></div>
                        </el-col>
                    </el-row>
                    <el-row class="mt-15">
                        <el-col :span="12">
                            <div>电子邮箱：<span v-text="contractorDetailContent.email"></span></div>
                        </el-col>
                        <el-col :span="12">
                            <div>信用等级：<span v-text="contractorDetailContent.creditScore"></span></div>
                        </el-col>
                    </el-row>
                </div>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="contractorDetailDialogStatus = false">关闭</el-button>
                </div>
            </el-dialog>
        </template>
        <!-- 里程碑 -->
        <template>
            <el-dialog title="里程碑" :visible.sync="milestoneListDialogStatus" size="large">
                <div class="mb-15">
                    <el-row>
                        <el-col :span="12">
                            项目名称：<span>企业门户网站开发</span>
                        </el-col>
                        <el-col :span="12">
                            项目进度：<span>滞后</span>
                        </el-col>
                    </el-row>
                </div>
                <el-table :data="milestoneList" border style="width: 100%"  class="text-center">
                    <el-table-column show-overflow-tooltip prop="name" label="阶段名称">
                    </el-table-column>
                    <el-table-column show-overflow-tooltip prop="cycleName" label="工作周期">
                    </el-table-column>
                    <el-table-column show-overflow-tooltip prop="startTime" label="开始时间">
                    </el-table-column>
                    <el-table-column show-overflow-tooltip prop="startTime" label="完成时间">
                    </el-table-column>
                    <el-table-column show-overflow-tooltip prop="money" label="阶段费用">
                    </el-table-column>
                    <el-table-column show-overflow-tooltip prop="status" label="当前状态">
                    </el-table-column>
                    <el-table-column show-overflow-tooltip prop="moneyType" label="费用托管">
                    </el-table-column>
                    <el-table-column show-overflow-tooltip prop="statusType" label="进度状态">
                    </el-table-column>
                    <el-table-column  show-overflow-tooltip label="操作" width="200">
                        <template scope="scope">
                            <span class="color02 pointer" @click="openMilestoneDetail(scope.$index, scope.row.id)">
                                详情
                            </span>
                            <span class="color02 pointer" @click="openCreateControlLog(scope.$index,scope.row.id)">
                                新增管控
                            </span>
                            <span class="color02 pointer" @click="openControlLog(scope.$index,scope.row.id)">
                                管控记录
                            </span>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination-wrapper clearfix" v-if = "milestoneListPagination.totalPage>1">
                    <el-pagination @current-change="changeMilestoneList" class="mt-15 ml-05 fr font-14" :current-page="milestoneListPagination.currentPage"
                        :page-size="milestoneListPagination.pageSize" layout="prev, pager, next" :total="milestoneListPagination.totalCount">
                    </el-pagination>
                </div>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="milestoneListDialogStatus = false">关闭</el-button>
                </div>
            </el-dialog>
        </template>
                <template>
            <el-dialog title="工作阶段详情" :visible.sync="milestoneDetailDialogStatus">
                <div>
                    <div class="mt-20">阶段名称：<span>需求</span> </div>
                    <div class="mt-20">工作内容：<span>需求</span></div>
                    <div class="mt-20">验收标准：<span>需求</span></div>
                </div>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="milestoneDetailDialogStatus = false">关闭</el-button>
                </div>
            </el-dialog>
        </template>
        <!-- 跟进记录管理 -->
        <template>
            <el-dialog title="跟进记录管理" size="small" :visible.sync="followUpLogListDialogStatus">
                <div class="text-right md-10"><el-button @click="openFollowUpCreateLog">新增跟进记录</el-button></div>
                <el-table :data="followUpLogList" border style="width: 100%" class="text-center">
                    <el-table-column show-overflow-tooltip prop="managerName" label="跟进人">
                    </el-table-column>
                    <el-table-column show-overflow-tooltip prop="createdAt" label="跟踪日期">
                    </el-table-column>
                    <el-table-column show-overflow-tooltip prop="workStage" label="跟踪阶段">
                    </el-table-column>
                    <el-table-column show-overflow-tooltip prop="title" label="跟踪事项">
                    </el-table-column>
                    <el-table-column show-overflow-tooltip prop="content" label="跟踪内容">
                    </el-table-column>
                </el-table>
                <div class="pagination-wrapper clearfix" v-if="followUpLogListPagination.totalPage>1">
                    <el-pagination @current-change="changeFollowUpLogList" class="mt-15 ml-05 fr font-14" :current-page="followUpLogListPagination.currentPage"
                        :page-size="followUpLogListPagination.pageSize" layout="prev, pager, next" :total="followUpLogListPagination.totalCount">
                    </el-pagination>
                </div>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="followUpLogListDialogStatus = false">关闭</el-button>
                </div>
            </el-dialog>
        </template>
        <!-- 跟进记录新增 -->
        <template>
            <el-dialog title="跟进记录管理" size="small" :visible.sync="followUpLogCreateDialogStatus" @close="closeDialog('followUpLogCreateForm')">
                <template>
                    <el-form :model="followUpLogCreateForm" :rules="followUpLogCreateFormRules" ref="followUpLogCreateForm">
                        <el-row>
                            <el-col :span = "12">
                                <el-form-item label="跟进人" prop="managerId" class="ml-14">
                                   <el-input v-model="followUpLogCreateForm.managerId"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span = "12">
                                <el-form-item label="跟进时间" prop="managerName">
                                     <el-date-picker v-model="followUpLogCreateForm.managerName" type="date" placeholder="选择日期">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span = "12">
                                <el-form-item label="跟进阶段" prop="workStage">
                                    <el-input v-model="followUpLogCreateForm.workStage"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span = "12">
                                <el-form-item label="跟进主题" prop="title">
                                    <el-input v-model="followUpLogCreateForm.title"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="跟进内容" prop="content">
                                    <el-input v-model="followUpLogCreateForm.content" type="textarea" :rows="4" placeholder="请简要输入跟进内容，最大 300 字"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </template>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="followUpLogCreateDialogStatus = false">取消</el-button>
                    <el-button type="primary" @click="submitCreateFollowUpLog('followUpLogCreateForm')">保存</el-button>
                </div>
            </el-dialog>
        </template>
              <!-- 管控记录 -->
        <template>
            <el-dialog title="管控记录" size="large" :visible.sync="controlLogListDialogStatus">
                  <!-- 日志查询 -->
                <template>
                    <el-form :inline="true" :model="controlLogSearchForm">
                        <el-form-item label="项目阶段">
                            <el-input v-model="controlLogSearchForm.operatorName"></el-input>
                        </el-form-item>
                        <el-form-item label="项目专员">
                            <el-input v-model="controlLogSearchForm.operatorName"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="fetchControlLogList(controlLogSearchForm)">查询</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="openCreateControlLog">新增管控记录</el-button>
                        </el-form-item>
                    </el-form>
                </template>
                <!-- 日志列表 -->
                <template>
                    <el-table :data="controlLogList" border class="text-center">
                        <el-table-column show-overflow-tooltip prop="managerName" label="项目专员">
                        </el-table-column>
                        <el-table-column show-overflow-tooltip prop="workStage" label="管控阶段">
                        </el-table-column>
                        <el-table-column show-overflow-tooltip prop="status" label="管控执行状态">
                        </el-table-column>
                        <el-table-column show-overflow-tooltip prop="planControlTime" label="计划/实际管控时间">
                        </el-table-column>
                        <el-table-column show-overflow-tooltip prop="title" label="管控主题">
                        </el-table-column>
                        <el-table-column show-overflow-tooltip prop="schedule" label="阶段进度">
                        </el-table-column>
                        <el-table-column show-overflow-tooltip prop="content" label="管控说明">
                        </el-table-column>
                        <el-table-column show-overflow-tooltip prop="problemProcess" label="问题处理">
                        </el-table-column>
                        <el-table-column show-overflow-tooltip label="操作">
                            <template scope="scope">
                            <span class="color02 pointer" @click='openUpdateControlLog(scope.$index, controlLogList)'>
                                编辑
                            </span>
                        </template>
                        </el-table-column>
                    </el-table>
                </template>
                <div class="pagination-wrapper clearfix" v-if = "controlLogListPagination.totalPage>1">
                    <el-pagination @current-change="changeControlLogList" class="mt-10 ml-05 fr font-14" :current-page="controlLogListPagination.currentPage"
                        :page-size="controlLogListPagination.pageSize" layout="prev, pager, next" :total="controlLogListPagination.totalCount">
                    </el-pagination>
                </div>
                 <div slot="footer" class="dialog-footer">
                    <el-button @click="controlLogListDialogStatus = false">关闭</el-button>
                </div>
            </el-dialog>
        </template>
        <!-- 管控日志新增 -->
        <template>
            <el-dialog title="管控记录" size="small" :visible.sync="createControlLogDialogStatus"  @close="closeDialog('createControlLogEditForm')">
                <template>
                    <el-form :model="createControlLogEditForm"   :rules="controlLogEditFormRules" ref="createControlLogEditForm">
                        <el-row>
                            <el-col :span = "8">
                                <el-form-item label="管控阶段" prop="stage">
                                <el-input v-model="createControlLogEditForm.stage" placeholder="请填写"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span = "8">
                                <el-form-item label="管控主题" prop="title">
                                    <el-select v-model="createControlLogEditForm.title" placeholder="请选择">
                                        <el-option label="正常跟进" value="1"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span = "8">
                                <el-form-item label="管控时间" prop="actualControlTime">
                                    <el-date-picker v-model="createControlLogEditForm.actualControlTime" type="date" placeholder="选择日期">
                                    </el-date-picker>
                                </el-form-item>
                                </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span = "8">
                                <el-form-item label="项目专员" prop="specialistId">
                                    <el-select v-model="createControlLogEditForm.specialistId" placeholder="请选择">
                                        <el-option v-for="item in specialistList" :key="item.id" :label="item.name" :value="item.id">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span = "8">
                                <el-form-item label="项目进度" prop="schedule">
                                    <el-radio class="radio" v-model="createControlLogEditForm.schedule" label="2">正常</el-radio>
                                    <el-radio class="radio" v-model="createControlLogEditForm.schedule" label="3">异常</el-radio>
                                </el-form-item>
                            </el-col>
                            <el-col :span = "8">
                                <el-form-item label="管控状态" prop="xyz">
                                    <el-radio class="radio" v-model="createControlLogEditForm.xyz" label="2">已管控</el-radio>
                                    <el-radio class="radio" v-model="createControlLogEditForm.xyz" label="3">待管控</el-radio>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="管控说明" prop="content">
                                    <el-input v-model="createControlLogEditForm.content" type="textarea" placeholder="请简要输入管控内容，最大300字"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="问题处理" prop="problemProcess">
                                    <el-input v-model="createControlLogEditForm.problemProcess" type="textarea" placeholder="请简要输入管控中的问题处理，最大300字"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </template>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="createControlLogDialogStatus = false">取消</el-button>
                    <el-button type="primary" @click="submitCreateControlLog('createControlLogEditForm')">保存</el-button>
                </div>
            </el-dialog>
        </template>
        <!-- 管控日志修改 -->
        <template>
            <el-dialog title="管控记录" size="small" :visible.sync="updateControlLogDialogStatus" @close="closeDialog('updateControlLogEditForm')">
                <template>
                    <el-form :model="updateControlLogEditForm" :rules="controlLogEditFormRules" ref="updateControlLogEditForm">
                        <el-row>
                            <el-col :span = "8">
                                <el-form-item label="管控阶段" prop="stage">
                                    <el-input v-model="createControlLogEditForm.stage" placeholder="请填写"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="管控主题" prop="title">
                                    <el-select v-model="updateControlLogEditForm.title" placeholder="请选择">
                                        <el-option label="正常跟进" value="1"></el-option>
                                        <el-option label="未正常跟进" value="2"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="管控时间" prop="actualControlTime">
                                    <el-date-picker v-model="updateControlLogEditForm.actualControlTime" type="date" placeholder="选择日期">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="项目专员" prop="specialistId">
                                    <el-select v-model="updateControlLogEditForm.specialistId" placeholder="请选择">
                                        <el-option v-for="item in specialistList" :key="item.id" :label="item.name" :value="item.id">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="项目进度" prop="schedule">
                                    <el-radio class="radio" v-model="updateControlLogEditForm.schedule" label="2">通过</el-radio>
                                    <el-radio class="radio" v-model="updateControlLogEditForm.schedule" label="3">不通过</el-radio>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="管控状态" prop="xyz">
                                    <el-radio class="radio" v-model="updateControlLogEditForm.xyz" label="2">通过</el-radio>
                                    <el-radio class="radio" v-model="updateControlLogEditForm.xyz" label="3">不通过</el-radio>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-form-item label="管控说明" prop="content">
                            <el-input v-model="updateControlLogEditForm.content" type="textarea"></el-input>
                        </el-form-item>
                        <el-form-item label="问题处理" prop="problemProcess">
                            <el-input v-model="updateControlLogEditForm.problemProcess" type="textarea"></el-input>
                        </el-form-item>
                    </el-form>
                </template>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="updateControlLogDialogStatus = false">取消</el-button>
                    <el-button type="primary" @click="submitUpdateControlLog('updateControlLogEditForm')">保存</el-button>
                </div>
            </el-dialog>
        </template>
        <!--操作记录查看 -->
        <template>
            <el-dialog title="操作记录查看" size="small" :visible.sync="operationLogListDialogStatus">
                <el-table :data="operationLogList" border style="width: 100%" class="text-center">
                    <el-table-column show-overflow-tooltip prop="managerName" label="操作人">
                    </el-table-column>
                    <el-table-column show-overflow-tooltip prop="createdAt" label="操作时间">
                    </el-table-column>
                    <el-table-column show-overflow-tooltip prop="title" label="操作主题">
                    </el-table-column>
                    <el-table-column show-overflow-tooltip prop="content" label="操作内容">
                    </el-table-column>
                </el-table>
                <div class="pagination-wrapper clearfix" v-if = "operationLogListPagination.totalPage>1">
                    <el-pagination @current-change="changeOperationLogList" class="mt-10 ml-05 fr font-14" :current-page="operationLogListPagination.currentPage"
                        :page-size="operationLogListPagination.pageSize" layout="prev, pager, next" :total="operationLogListPagination.totalCount">
                    </el-pagination>
                </div>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="operationLogListDialogStatus = false">关闭</el-button>
                </div>
            </el-dialog>
        </template>

    </div>
</template>
<script>
    import {
        getListDone,
        // postSetSpecialist,
        postSetVisible,
        postSetInternal,
        postAddFollowUpLog,
        getControlLogList,
        postAddControlLog,
        postUpdateControlLog,
        getFollowUpLogList,
        getOperationLogList
    } from '@/api/project.js'
    import {
        getSpecialistList,
        getUserAccountBasicInfo
    } from '@/api/user.js'
    export default {
        data () {
            return {
                // 列表表单内容
                projectDoneForm: {
                    projectNo: '',
                    applicationArea: '',
                    statusTimeStart: '',
                    statusTimeEnd: '',
                    publishTimeStart: '',
                    publishTimeEnd: '',
                    isInternal: '',
                    specialistId: '',
                    contractSignTimeStart: '',
                    contractSignTimeEnd: ''
                },
                // 表单规则
                projectDoneFormRules: {},
                // 项目列表
                projectDoneList: [],
                // 项目翻页
                projectDonePagination: {},

                // 发包方信息
                employerDetailDialogStatus: false,
                employerDetailContent: {},

                // 中标方信息
                contractorDetailDialogStatus: false,
                contractorDetailContent: {},

                // 里程碑
                milestoneListDialogStatus: false,
                milestoneList: [{
                    id: '5662',
                    name: '1',
                    cycleName: '2',
                    specialistName: '3',
                    startTime: '4',
                    endTime: '11',
                    money: '22',
                    status: '33',
                    moneyType: '44',
                    statusType: '55'
                }],
                milestoneListPagination: {
                    'current-page': 12,
                    'pageSize': 10,
                    'totalCount': 120
                },
                milestoneDetailDialogStatus: false,

                 // 管控记录
                controlLogListDialogStatus: false,
                controlLogList: [],
                controlLogListPagination: {},
                controlLogSearchForm: {

                },

                // 管控记录编辑
                createControlLogDialogStatus: false,
                updateControlLogDialogStatus: false,
                createControlLogEditForm: {
                    title: '',
                    actualControlTime: '',
                    specialistId: '',
                    schedule: '',
                    xyz: ''
                },
                controlLogEditFormRules: {
                    stage: {
                        required: true,
                        message: '请填写管控阶段',
                        trigger: 'blur'
                    },
                    schedule: {
                        required: true,
                        message: '请填写项目进度',
                        trigger: 'blur'
                    },
                    title: {
                        required: true,
                        message: '请填写管控主题',
                        trigger: 'blur'

                    },
                    actualControlTime: {
                        required: true,
                        message: '请填写管控时间',
                        type: 'date',
                        trigger: 'change'

                    },
                    specialistId: {
                        required: true,
                        message: '请填写项目专员',
                        trigger: 'change',
                        type: 'number'

                    },
                    xyz: {
                        required: true,
                        message: '请填写项目进度',
                        trigger: 'change'

                    },
                    content: {
                        required: true,
                        message: '请填写管控说明',
                        trigger: 'blur'

                    },
                    problemProcess: {
                        message: '请填写问题处理',
                        trigger: 'blur'

                    }

                },
                // 修改管控日志
                updateControlLogEditForm: {
                    title: '',
                    actualControlTime: '',
                    specialistId: '',
                    schedule: '',
                    xyz: ''
                },
                updateControlLogEditFormRules: {},

                // 跟进记录
                followUpLogListDialogStatus: false,
                followUpLogList: [],
                followUpLogListPagination: {},

                // 跟进记录新增
                followUpLogCreateDialogStatus: false,
                followUpLogCreateForm: {
                    managerName: '',
                    createdAt: '',
                    workStage: '',
                    title: '',
                    content: ''
                },
                followUpLogCreateFormRules: {
                    managerId: {
                        required: true,
                        message: '请填写跟进人',
                        trigger: 'blur'
                    },
                    managerName: {
                        required: true,
                        message: '请填写跟进时间',
                        type: 'date',
                        trigger: 'blur'
                    },
                    workStage: {
                        required: true,
                        message: '请填写跟踪阶段',
                        trigger: 'blur'
                    },
                    title: {
                        required: true,
                        message: '请填写跟踪事项',
                        trigger: 'blur'

                    },
                    content: [{
                        required: true,
                        message: '请填写跟踪内容',
                        trigger: 'blur'
                    },
                    {
                        max: 300,
                        message: '长度在300 个字符'

                    }]
                },
                // 操作记录查看
                operationLogListDialogStatus: false,
                operationLogList: [],
                operationLogListPagination: {},

                activeDialogData: {},
                options: [{
                    value: '跟踪无反馈',
                    label: '跟踪无反馈'
                }, {
                    value: '财务不支持',
                    label: '财务不支持'
                }, {
                    value: '已经转线下合作',
                    label: '已经转线下合作'
                }, {
                    value: '自己已解决',
                    label: '自己已解决'
                }],
                specialistList: [],
                value: ''
            }
        },
        methods: {
            // 获取专员列表
            fetchSpecialist () {
                getSpecialistList().then((response) => {
                    if (response.data.code === 0) {
                        this.specialistList = response.data.data
                        console.log(this.specialistList)
                    } else if (response.data.code === 1) {
                        this.$message('获取列表数据失败')
                    } else {
                        this.$message('未知错误')
                    }
                }).catch(function (err) {
                    console.log(err)
                })
            },
            // 获取列表内容
            fetchProjectDoneList (data, currentPage = 1, pageSize = 10) {
                let param = data || {}
                param.currentPage = currentPage
                getListDone(data).then((response) => {
                    if (response.data.code === 0) {
                        let d = response.data.data.data
                        // 转换后台数据
                        for (let i = 0; i < d.length; i++) {
                            // 项目预算
                            d[i].budget = d[i].budgetMin + ' - ' + d[i].budgetMax
                            // 项目周期
                            d[i].cycleTogether = d[i].cycle + d[i].cycleName
                        }
                        this.projectDoneList = d
                        this.projectDonePagination = response.data.data
                    } else if (response.data.code === 1) {
                        this.$message('获取列表数据失败')
                    } else {
                        this.$message('未知错误')
                    }
                }).catch(function (err) {
                    console.log(err)
                })
            },
            // 翻页
            changeProjectDonePage (data) {
                let param = this.projectDoneForm
                this.fetchProjectDoneList(param, data)
            },
            // 对话框弹出，填写弹出框的显示数据
            activeDialog (index, data, isActive = false) {
                if (isActive) {
                    this.activeDialogData = data[index]
                } else {
                    this.activeDialogData = {}
                }
            },
            // 关闭对话框
            closeDialog (formName) {
                this.resetForm(formName)
            },
            // 重置表单
            resetForm (formName) {
                this.$refs[formName].resetFields()
            },
            // 发包方详细信息
            openEmployerDetail (index, data) {
                this.activeDialog(index, data, true)
                this.employerDetailDialogStatus = true
                this.fetchUserAccountBasicInfo({
                    id: this.activeDialogData.id
                })
            },
            // 中标方详细信息
            openContractorDetail (index, data) {
                this.activeDialog(index, data, true)
                this.contractorDetailDialogStatus = true
                this.fetchUserAccountBasicInfo({
                    id: this.activeDialogData.id
                })
            },
             // 里程碑详细信息
            openMilestoneList (index, data) {
                this.activeDialog(index, data, true)
                this.milestoneListDialogStatus = true
                // this.fetchControlLogList({
                //     id: this.activeDialogData.id
                // })
            },
            openMilestoneDetail (index, data) {
                this.activeDialog(index, data, true)
                this.milestoneDetailDialogStatus = true
            },
            changeMilestoneList (data) {
                // let param = this.projectImplementingForm
                // this.fetchProjectImplementingList(param, data)
            },
            // // 获取里程碑
            // fetchMilestoneList (data) {
            //     getMilestoneList(data).then((response) => {
            //         if (response.data.code === 0) {
            //             this.controlLogList = response.data.data.data
            //             this.controlLogListPagination = response.data.data
            //         } else if (response.data.code === 1) {
            //             this.$message('获取列表数据失败')
            //         } else {
            //             this.$message('未知错误')
            //         }
            //     }).catch(function (err) {
            //         console.log(err)
            //     })
            // },
            // 里程碑翻页
            // changeControlLogList () {
            // },
            // 获取用户信息
            fetchUserAccountBasicInfo (data) {
                getUserAccountBasicInfo(data).then((response) => {
                    if (response.data.code === 0) {
                        this.employerDetailContent = response.data.data
                        this.contractorDetailContent = response.data.data
                    } else if (response.data.code === 1) {
                        this.$message('获取用户信息失败')
                    } else {
                        this.$message('未知错误')
                    }
                }).catch(function (err) {
                    console.log(err)
                })
            },
            // 管控日志
            openControlLog (index, data) {
                this.activeDialog(index, data, true)
                this.controlLogListDialogStatus = true
                this.fetchControlLogList({
                    id: this.activeDialogData.id
                })
            },
            // 获取管控日志
            fetchControlLogList (data) {
                getControlLogList(data).then((response) => {
                    if (response.data.code === 0) {
                        this.controlLogList = response.data.data.data
                        this.controlLogListPagination = response.data.data
                    } else if (response.data.code === 1) {
                        this.$message('获取列表数据失败')
                    } else {
                        this.$message('未知错误')
                    }
                }).catch(function (err) {
                    console.log(err)
                })
            },
            // 管控日志翻页
            changeControlLogList () {
            },
            // 创建管控日志
            openCreateControlLog () {
                this.createControlLogDialogStatus = true
            },
            // 修改管控日志
            openUpdateControlLog (index, data) {
                this.updateControlLogDialogStatus = true
            },
            // 提交管控日志新增
            submitCreateControlLog (formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let data = this.createControlLogEditForm
                        postAddControlLog(data).then((response) => {
                            if (response.data.code === 0) {
                                this.$message('提交成功')
                            } else if (response.data.code === 1) {
                                this.$message('提交失败')
                            } else {
                                this.$message('未知错误')
                            }
                        })
                    }
                })
            },
            // 提交管控日志修改
            submitUpdateControlLog (formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let data = this.updateControlLogEditForm
                        postUpdateControlLog(data).then((response) => {
                            if (response.data.code === 0) {
                                this.$message('提交成功')
                            } else if (response.data.code === 1) {
                                this.$message('提交失败')
                            } else {
                                this.$message('未知错误')
                            }
                        })
                    }
                })
            },
            // 设置主站不显示
            setVisible (index, data) {
                this.$confirm('您确定将项目【' + data[index].name + '】设置为主站不显示吗？?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    postSetVisible({
                        id: data[index].id,
                        visible: 2
                    }).then((response) => {
                        console.log(response.data.code)
                        if (response.data.code === 0) {
                            this.$message('修改成功')
                        } else if (response.data.code === 1) {
                            this.$message('修改失败')
                        }
                    })
                }).catch(function (err) {
                    console.log(err)
                })
            },
            // 设为内部项目
            setInternal (index, data) {
                this.$confirm('您确定将项目【' + data.name + '】设置为内部项目？?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    postSetInternal({
                        id: data.id,
                        isInternal: 1
                    }).then((response) => {
                        console.log(response.data.code)
                        if (response.data.code === 0) {
                            this.$message('修改成功')
                            data.isInternal = 1
                        } else if (response.data.code === 1) {
                            this.$message('修改失败')
                        }
                    })
                }).catch(function (err) {
                    console.log(err)
                })
            },

            // 跟进日志
            // 打开跟进日志弹出框
            openFetchFollowUpLog (index, data) {
                this.activeDialog(index, data, true)
                this.followUpLogListDialogStatus = true
                this.fetchFollowUpLogList({
                    id: this.activeDialogData.id
                })
            },
            // 打开新增跟进日志弹出框
            openFollowUpCreateLog (index, data) {
                // this.activeDialog(index, data, true)
                this.followUpLogCreateDialogStatus = true
            },
            // 提交新增跟进日志
            submitCreateFollowUpLog (formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let data = this.followUpLogCreateForm
                        postAddFollowUpLog(data).then((response) => {
                            if (response.data.code === 0) {
                                this.$message('提交成功')
                            } else if (response.data.code === 1) {
                                this.$message('提交失败')
                            } else {
                                this.$message('未知错误')
                            }
                        })
                    }
                })
            },
            // 获取跟进记录管理
            fetchFollowUpLogList (data) {
                getFollowUpLogList(data).then((response) => {
                    if (response.data.code === 0) {
                        this.followUpLogList = response.data.data.data
                        this.followUpLogListPagination = response.data.data
                    } else if (response.data.code === 1) {
                        this.$message('获取列表数据失败')
                    } else {
                        this.$message('未知错误')
                    }
                }).catch(function (err) {
                    console.log(err)
                })
            },
            // 跟进记录管理翻页
            changeFollowUpLogList (page) {
                let param = {
                    id: this.activeDialogData.id,
                    currentPage: page,
                    pageSize: 10
                }
                this.fetchFollowUpLogList(param)
            },
            // 操作日志
            // 打开操作日志弹出框
            openOperationLog (index, data) {
                this.activeDialog(index, data, true)
                this.operationLogListDialogStatus = true
                this.fetchOperationLog({
                    id: this.activeDialogData.id
                })
            },
            // 获取操作记录管理
            fetchOperationLog (data) {
                getOperationLogList(data).then((response) => {
                    if (response.data.code === 0) {
                        console.log(response.data.data.data)
                        this.operationLogList = response.data.data.data
                        this.operationLogListPagination = response.data.data
                    } else if (response.data.code === 1) {
                        this.$message('获取列表数据失败')
                    } else {
                        this.$message('未知错误')
                    }
                }).catch(function (err) {
                    console.log(err)
                })
            },
            // 操作记录翻页
            changeOperationLogList (page) {
                let param = {
                    id: this.activeDialogData.id,
                    currentPage: page,
                    pageSize: 10
                }
                this.fetchOperationLog(param)
            }
        },
        created () {
            this.fetchProjectDoneList()
            this.fetchSpecialist()
        }
    }

</script>

<style scoped>
    .mt-15 {
        margin-top: 15px
    }

    .ml-05 {
        margin-left: -5px
    }

    .mr-25 {
        margin-right: 25px;
    }

</style>
